<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  </style>
  <link rel="stylesheet" href="iconfont/iconfont.css">
</head>
<body>
  <form id="form">
    <div>
      <span class="iconfont icon-youxiang"></span>
      <label for="email">邮箱:</label>
      <input type="email" name="email" id="email" required>
      <span></span>
    </div>
    <div>
      <span class="iconfont icon-mima"></span>
      <label for="password">密码:</label>
      <input type="password" name="password" id="password" required>
      <span></span>
    </div>
    <button type="submit">登录</button>
  </form>
  <div class="user-info" id="user-info">
        <div id="user-name"></div>
        <div id="user-age"></div>
        <div id="user-strengths"></div>
        <div id="user-avatar"></div>
  </div>      
  <script>
    let msg = [{
        name: '张三',
        age: 20,
        strengths: 'JavaScript',
        avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.39mOMBjUfsK-HL9jUbv1MwHaE7?pid=ImgDet&rs=1',
        email: 'yunding@qq.com',
        password: 33333
    },
    {
        name: '李四',
        age: 19,
        strengths: 'python',
        avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.YlKimVo94OkaZDZCzPIDpAHaFh?pid=ImgDet&rs=1',
        email: '12345678@163.com',
        password: 11111
    },
    {
        name: '王五',
        age: 18,
        strengths: 'Java',
        avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.P2hK9SRjhFE8WM9N8tgWFAHaEQ?pid=ImgDet&rs=1',
        email: 'yundingshuyuan@qq.cn',
        password: 222222
    }];

    const useremail = document.querySelector('[name=email]')
    const userpassword = document.getElementById('password')
    const userInfo = document.getElementById('user-info');
    const userName = document.getElementById('user-name');
    const userAge = document.getElementById('user-age');
    const userStrengths = document.getElementById('user-strengths');
    const userAvatar = document.getElementById('user-avatar');
    useremail.addEventListener('change', verifyEmail)
    function verifyEmail(email) {
      const span = useremail.nextElementSibling
      const reg = /\w{1,}[^.](@qq|@163)\.(com|cn)$/
      if(!reg.test(useremail.value)){
      span.innerHTML = '输入不合法，请满足以下条件:1.结尾为.com或.cn 2.仅包含一个小数点 3.小数点前为@qq或@163'
      span.className = 'iconfont icon-cuowu'
        return false 
      }
      span.innerHTML = '格式正确'
      span.className = 'iconfont icon-zhengque'
    }
     document.getElementById('login-form').addEventListener('submit', function(event) {
        event.preventDefault();
        const user = msg.find(item => item.email === email && item.password === parseInt(userpassword.value));
          if (user) {
              userName.textContent = `姓名: ${user.name}`;
              userAge.textContent = `年龄: ${user.age}`;
              userStrengths.textContent = `技能: ${user.strengths}`;
              userAvatar.textContent = `头像: <img src="${user.avatar}" alt="Avatar">`;
          } 
        });
  </script>
</body>
</html>